<template>
    <div style="display: flex;flex-direction: column;height:100%;">
        <div class="queryform-container" style="flex-grow: 0;">
            <a-form ref="queryFormRef" :model="queryForm" layout="inline" :label-col="{width:'100px'}">
                <a-form-item :label-col="{ span: 6 }"
                             :wrapper-col="{ span: 16 }" autocomplete="off"
                             label="项目"
                             name="projectCode">
                    <a-select v-model:value="queryForm.projectCode" style="width: 150px">
                        <a-select-option v-for="project in projectList" :value="project.projectCode">
                            {{ project.projectName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label-col="{ span: 6 }"
                             :wrapper-col="{ span: 16 }" autocomplete="off"
                             label="表"
                             name="modelCode">
                    <a-select v-model:value="queryForm.modelCode" style="width: 150px">
                        <a-select-option v-for="model in modelList" :value="model.modelCode">{{ model.tableComment }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" @click="handleGenerate">查看代码</a-button>
<!--                        <a-button type="primary" @click="handleGenerate2Disk">生成到磁盘</a-button>-->
                    </a-space>
                </a-form-item>
            </a-form>
        </div>
        <div style="flex-grow: 2;position: relative;">
            <a-tabs v-model:activeKey="activeKey" style="position: absolute;width:100%;height:100%;">
                <a-tab-pane v-for="(tpc,index) of templateAndCode" :key="index" :tab="tpc.templateName">
                    <a-button type="" danger style="position: absolute;top:60px;right:30px;"
                              @click="handleCopy(tpc.templateCode,$event)">复制
                    </a-button>
                    <pre><code v-html="tpc.templateCodeHightlight"></code></pre>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import request from "@/util/request.js";
import hljs from "highlight.js/lib/core";
import 'highlight.js/styles/github.css';
import java from 'highlight.js/lib/languages/java';
import xml from 'highlight.js/lib/languages/xml';
import html from 'highlight.js/lib/languages/xml';
import vue from 'highlight.js/lib/languages/xml';
import javascript from 'highlight.js/lib/languages/javascript';
import sql from 'highlight.js/lib/languages/sql';
import {message} from "ant-design-vue";
import {handleClipboard} from "@/util/clip.js";
import {showLoading,hideLoading,} from "@/util/util.js";
hljs.registerLanguage('java', java);
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('html', html);
hljs.registerLanguage('vue', vue);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('sql', sql);
const projectList = ref([]);
const modelList = ref([]);
const queryForm = reactive({})
const templateAndCode = ref([])
const activeKey = ref(0)
const handleGenerate = () => {
  showLoading()
    //调用后端系统生成所选项目和所选表的所有代码
    request({
        url: '/api/system/gen/project/generateAll',
        method: 'get',
        params: {
            projectCode: queryForm.projectCode,
            modelCode: queryForm.modelCode
        }
    }).then((response) => {
      hideLoading()
        if (response.success) {
            const data = response.data;
            templateAndCode.value = data;
            for (let tpc of templateAndCode.value) {
                const result = hljs.highlight(tpc.templateCode || "", {language: tpc.sourceType});
                tpc.templateCodeHightlight = result.value
            }
            activeKey.value = 0
        } else {
            message.error(response.errMsg);
        }
    })
}

onMounted(() => {
  showLoading()
    //加载项目列表
    request({
        method: 'post',
        url: '/api/system/gen/project/list',
        data: {}
    }).then((response) => {
      hideLoading()
        const list = response.data;
        projectList.value = list;
    });
    //加载表列表
  showLoading()
    request({
        method: 'post',
        url: '/api/system/gen/model/list',
        data: {}
    }).then((response) => {
      hideLoading()
        const list = response.data;
        modelList.value = list;
    });
})

function handleGenerate2Disk() {
  showLoading()
    //调用后端系统生成所选项目和所选表的所有代码
    request({
        url: '/api/system/gen/project/generateAll2Disk',
        method: 'get',
        params: {
            projectCode: queryForm.projectCode,
            modelCode: queryForm.modelCode
        }
    }).then((response) => {
      hideLoading()
    });
}

/** 复制代码成功 */
function clipboardSuccess() {
    message.success("复制成功")
}

function handleCopy(content, event) {
    console.log(content)
    handleClipboard(content, event)
}
</script>
<style scoped>
:deep(.ant-tabs-content-holder) {
    overflow: auto;
}
</style>